import React, {useEffect,useState} from "react";
import api from "../../../../api";
import HomeHotView from "../HomeHotView";

const HomeHotList=(props)=>{
    const [hot1List,setHot1List] = useState([])
    const [hot2List,setHot2List] = useState([])
    //将city传入到home页面中
    const [city,setCity] = useState(props.cityName)
    /*
    * 获取hot1的数据
    * useEffect是函数式组件中用来替代类式组件中的声明周期钩子的
    * 如果 用空【】的话，代表组件挂载完成之后做某事情
    *  依赖参数不同时有不同的效果：
        为空： 组件的任何更新，该 useEffect 对应的返回函数和函数都执行
        为空数组: 不监听组件的更新
        数组中有具体依赖：对应的依赖数据，有变化的时候，才会执行
    * */
    useEffect(()=>{
        api.getHomtHot1({
            cityName:props.cityName
        }).then(res=> {
            if (res.data.status === 200) {
                setHot1List(res.data.result)
                // setCity(res.data.city)
            }
        })
    })
    /*
    * 获取hot2的值
    * */
    useEffect(()=>{
        api.getHomtHot2({
                cityName:props.cityName
            }
        ).then(res=> {
            if (res.data.status === 200) {
                setHot2List(res.data.result)
                // setCity(res.data.city)
                // console.log(res.data.cityName)
            }
        })
    })

    return(
        <div>
            {
                hot1List.length>0?
                    <HomeHotView data={hot1List} title={'热门商品'} city={city}/>:
                    <div>等待加载.....</div>
            }

            {
                hot2List.length>0?
                    <HomeHotView data={hot2List} title={'新品推荐'} city={city}/>:
                    <div>等待加载中.........</div>
            }
        </div>
    )
}
export default HomeHotList